import React, { Component } from 'react'
import Mock from 'mockjs'
const data=Mock.mock({
    "list|5":[{
        id:"@id",
        "children":[{
            id:'@id',
            img:"@image(300x200,@color)",
        }]
    }]
})

export class lbt extends Component {
    constructor(props){
        super(props)
        this.state={
            list:data.list,
            i:0
        }
    }
  render() {
      const {list,i}=this.state
    return (
      <div className='lbt'>
          <ul className='dian'>
            {list.map((item,index)=>{
                return <li key={item.id} onClick={()=>{
                    this.setState({
                        i:index
                    })
                }}
                className={index===i?'on':''}
                > 
                </li>
            })}
          </ul>
          <ol className='tu'>
              {list[i].children.map(item=>{
                  return <li key={item.id}>
                      <img src={item.img} alt="" />
                  </li>
              })}
          </ol>
      </div>
    )
  }
}

export default lbt